<template>
  <el-dialog :visible.sync="isOrdersAddressVisible" title="收货地址">
    <el-form ref="onSubmit" :model="ordersAddressForm" :rules="rules">
      <el-form-item label="具体地址：" label-width="120px" prop="address">
        <el-input v-model="ordersAddressForm.address" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="省市县：" label-width="120px" prop="city">
        <el-cascader
          :options="cityOptions"
          change-on-select
          @change="changeProvince"
        >
        </el-cascader>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isOrdersAddressVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cityOptions from '@/utils/city_data2017_element'
import { createNamespacedHelpers } from 'vuex'

const {
  mapState,
  mapMutations
} = createNamespacedHelpers('orders')

export default {
  name: 'OrdersAddress',
  data () {
    return {
      cityOptions,
      isOrdersAddressVisible: false,
      ordersAddressForm: {
        address: '',
        city: ''
      },
      rules: {
        address: [
          {
            required: true,
            message: '请输入具体地址',
            trigger: 'blur'
          }
        ],
        city: [
          {
            required: true,
            message: '请选择省市县',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    ...mapMutations(['setOrdersAddressVisible', 'setFlag']),
    changeProvince (value) {
      console.log(value)
      this.ordersAddressForm.city = value.join(',')
    },
    async onSubmit () {
      try {
        await this.$refs.onSubmit.validate()
        this.$message.success('修改成功')
        this.isOrdersAddressVisible = false
      } catch (e) {
        console.log('校验失败')
      }
    }
  },
  computed: {
    ...mapState(['ordersAddressVisible', 'flag'])
  },
  watch: {
    ordersAddressVisible (value) {
      this.isOrdersAddressVisible = value
    },
    isOrdersAddressVisible (value) {
      this.setFlag(value)
      if (this.flag) return
      this.setOrdersAddressVisible()
    }
  }
}
</script>

<style scoped>

</style>
